<script setup>
import { reactive } from 'vue';
import { downloadFiles } from '@T2/utils/utils.ts';

const { content } = defineProps({
  content: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(['showImages']);

const showImages = (arrs) => {
  emits('showImages', arrs);
}
</script>

<template>
  <el-step>
    <template #icon>
      <div class="step-icon"></div>
    </template>
    <template #title>
      <div class="title-line1 flex--center">
        <span class="title-name">工单信息</span>
        <el-icon color="#888888"><Clock /></el-icon>
        <span class="create-time">{{ content.create_time }}</span>
        <label class="create-user">创建人：<strong>{{ content.creater_name }}</strong></label>
      </div>
    </template>
    <template #description>
      <div class="detail-box flex flex-wrap">
        <div class="class-name">工单详情<span>编号：GZ-{{ content.id }}</span></div>
        <div class="info-item">
          <label>所属站点：</label>
          <span>{{ content.unit_name }}</span>
        </div>
        <div class="info-item">
          <label>报障位置：</label>
          <span>{{ content.addr }}</span>
        </div>
        <div class="info-item">
          <label>工单类型：</label>
          <span>{{ content.type }}</span>
        </div>
        <div class="info-item">
          <label>处理等级：</label>
          <span>{{ content.level }}级</span>
        </div>
        <div class="info-item" style="width: 100%;">
          <label>问题描述：</label>
          <span>{{ content.describe }}</span>
        </div>
        
        <div class="class-name" v-if="content.files.length || content.fj.length">资料信息</div>
        <div class="info-item" v-if="content.files.length">
          <label>图片信息：</label>
          <el-button type="primary" link @click="showImages(content?.files_json || [])">查看</el-button>
        </div>
        <div class="info-item" style="width: calc(100% / 3 * 2);" v-if="content.fj.length">
          <label>相关附件：</label>
          <div class="flex-column">
            <div class="fj-item flex-sb-center" v-for="item in content.fj_json">
              <span class="fj-name">{{ item.name }}</span>
              <el-button type="primary" link @click="downloadFiles(item.name, item.file_url)">下载</el-button>
            </div>
          </div>
        </div>
      </div>
    </template>
  </el-step>
</template>

<style lang="scss" scoped>
@use './style.scss';
.detail-box {
  margin-top: 4px;
  padding: 12px 14px;
  background-color: #F4F9FF;
}
</style>